<template>
	<div>
		<h3>用户 - 【 更换头像 】</h3>
		<hr >
		<div style="display: flex;">
			<div style="width: 40%;">
				<img v-bind:src="`${$ip}/api/public/showimg/${$store.state.user.pic}`"
				style="width: 20vw;height: 20vw">
			</div>
			<div style="width: 20%;line-height: 36px;">
				<table>
					<tr>
						更换头像
						<hr >
					</tr>
					<tr>
						<input type="file" ref="img"/>
					</tr>
					<tr>
						<td><button @click="doUpdatePic()">修改</button></td>
					</tr>
				</table>
			</div>
			
		</div>
		
	</div>
</template>

<script setup>
	import { ref,reactive , onMounted  } from "vue"
	import {$get , $postf} from "../../ajax/index.js"
	import store from "../../store/index.js"
	
	const img = ref(null);
	const data = reactive({
		pic :'',
	})
	
	function doUpdatePic(){
		console.log("更新头像");
		let fd = new FormData();
		
		let filex = img.value.files[0];
		console.log(filex);
		fd.append("mypic",filex);
		
		$postf("/api/user/updatePic",fd
		).then((resp)=>{
			console.log(resp.data.data);
			store.state.user.pic = resp.data.data
		})
	}
	
	onMounted(()=>{
		
	})
</script>

<style>
</style>
